<template>
	<view class="video_tab">
		<view class="video_tab_title">
			<view class="title_inner">
				<uni-segmented-control 
				:current="current" 
				:values="items.map(v => v.title)" 
				style-type="text"
				active-color="#d4237a"
				@clickItem="handleChange">
				</uni-segmented-control>
			</view>
			<view class="iconfont iconsearch"></view>
		</view>
		<view class="video_tab_content">
			<view 
			v-if="current < 4">
				<videoMain
					:urlobj="{url: items[current].url, params: items[current].params}"
				>
					
				</videoMain>
			</view>
			<view v-if="current === 4">
				<videoCategory></videoCategory>
			</view>
			
		</view>
	</view>
</template>

<script>
	import videoMain from './vide-main/index.vue'
	import videoCategory from './vide-category/index.vue'
	export default {
		components: {
			videoMain,
			videoCategory
		},
		data() {
			return {
				current: 0,
				items: [
					{	
						title:"推荐", 
						url: '/videoimg/v1/videowp/featured', 
						params: {limit: 30, skip:0, order: "hot"}
					},
					{	
						title:"娱乐", 
						url: '/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a', 
						params: {limit: 30, skip:0, order: "new"}
					},
					{	
						title:"最新", 
						url: '/videoimg/v1/videowp/videowp', 
						params: {limit: 30, skip:0, order: "new"}
					},
					{
						title:"热门", 
						url: '/videoimg/v1/videowp/videowp', 
						params: {limit: 30, skip:0, order: "hot"}
					},
					{
						title:"分类", 
						url: '/videoimg/v1/videowp/category', 
						params: {limit: 30, skip:0, order: "hot"},
					}
				]
			}
		},
		methods: {
			handleChange(e) {
				if(this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

<style lang="scss" >
.video_tab{
  .video_tab_title{
    position: relative;
    .title_inner{
      width: 60%;
      margin: 0 auto;
    }
    .iconsearch{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
    }
  }
  .video_tab_content{}
}
</style>
